<template>
  <div class="map">
    <div class="search">
      <map-search @input_val="inputVal" @select_val="selectVal" />
    </div>
    <div class="map_container">
      <l-map
        :zoom="zoom"
        :center="center"
        :max-bounds="bounds"
        :min-zoom="9"
        :max-zoom="15"
         :key="`${center[0]}-${center[1]}-${zoom}`"
        style="height: 100vh; width: 100%"
      >
        <l-tile-layer
          url="http://192.168.88.211:8080/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-marker
          v-for="(marker, index) in markers"
          :key="index"
          :lat-lng="marker.latlng"
          :icon="customIcon"
          @click="handleMarkerClick(marker)"
        >
          <l-tooltip :offset="tooltipOffset">
            <div class="popup-content">
              <p>设备名称: {{ marker.regionName }}</p>
              <p>端设备数量: {{ marker.endNum }}</p>
              <p>边设备数量: {{ marker.edgNum }}</p>
            </div>
          </l-tooltip>
        </l-marker>
      </l-map>
    </div>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";
import mapSearch from "./search.vue";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
// import geojsonData from "./city.json"; // 确保这个路径是正确的
import geoRegionData from "./equip.json"; // 确保这个路径是正确的

// 移除默认的图标路径
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip,
    mapSearch,
  },
  data() {
    return {
      zoom: 9,
      center: [32.0617, 118.7636], // 江苏省的中心坐标
      bounds: [
        [30.7, 116.3],
        [35.1, 122.3],
      ], // 江苏省的地理边界
      markers: geoRegionData,
      customIcon: L.icon({
        iconUrl: require("./equip.png"), // 自定义图标的路径
        iconSize: [21, 27], // 图标大小
        iconAnchor: [12, 41], // 图标锚点
        popupAnchor: [1, -34], // 弹出框相对于图标的锚点
        shadowSize: [41, 41], // 阴影大小（如果有）
        shadowAnchor: [12, 41], // 阴影锚点（如果有）
      }),
      tooltipOffset: L.point(10, 10), // 调整偏移值
    };
  },
  methods: {
    inputVal(val) {
      // 处理输入值变化
    this.center = val;
      this.zoom = 15;
  
    },
    selectVal(val) {
      // 处理选择值变化
      this.center = val;
      this.zoom = 15;
    },
    handleMarkerClick(marker) {
      this.center = marker.latlng;
      this.zoom = 15;
    }
  },
};
</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 100%;
  position: relative;

  .search {
    position: absolute;
    z-index: 1000;
    left: 20px;
    top: 10px;
    padding: 10px; /* 设置内边距 */
  }
}

@import "~leaflet/dist/leaflet.css";

.popup-content {
  font-family: Arial, sans-serif;
  text-align: left;
}

.popup-content h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.popup-content p {
  margin: 4px 0;
  font-size: 14px;
}

/deep/.leaflet-control {
  display: none !important; /* 隐藏默认控件 */
}
/deep/.leaflet-control-zoom {
  display: none !important; /* 隐藏默认控件 */
}
</style>
